<template>
    <div class="btg">
        <div class="tops">
            <div>
                <span>年龄比例</span>
                <p class="bot"></p>
            </div>
        </div>
        <div class="bots" ref="bots">

        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
let bots = ref()
let option = {
   animation: true, // 控制动画是否开启
        // animationDuration: 10000, // 动画的时长, 它是以毫秒为单位
   animationDuration: function(arg: number) {
         console.log(arg)
         return 1000 * arg
   },
   animationEasing: 'bounceOut', //linear 缓动动画
   animationThreshold: 8, // 动画元素的阈值
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
         color: "#FFF",
      },
      // axisPointer: {
      // 	type: "shadow",
      // 	label: {
      // 		show: true,
      // 	},
      // },
   },
   grid: {
      left: "10%",
      top: "18%",
      right: "5%",
      bottom: "25%",
   },
   legend: {
      top: "4%",
      left: '75%',
      "itemWidth": 13,
      "itemHeight": 13,
      itemStyle: {
         color: "#18A4FF"
      },
      "icon": "rect",
      "padding": 0,
      textStyle: {
         "color": "#c0c3cd",
         fontSize: 13,
         "padding": [2, 0, 0, 0]
      }
   },
   xAxis: {
      data: ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6"],

      axisLine: {
         show: true, //隐藏X轴轴线
         lineStyle: {
            color: "#163a5f",
            width: 2,
         },
      },
      axisTick: {
         show: false, //隐藏X轴刻度
         alignWithLabel: true,
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: "#BDD8FB", //X轴文字颜色
            fontSize: 12,
         },
         interval: 0,
      
      },
   },
   yAxis: [
      {
         type: "value",
         // name: "单位：ml",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },

         splitLine: {
            show: false,
            lineStyle: {
               color: "rgba(255, 255, 255, 0.15)",
               type: 'dashed', // dotted 虚线
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 1,
            },
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "#BDD8FB",
               fontSize: 12,
            },
         },
      },
      {
         type: "value",
         name: "",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },
         splitLine: {
            show: false,
            lineStyle: {
               width: 1,
               color: "#CED2DB",
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 2,
            },
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "#797A7F",
               fontSize: 12,
            },
         },
      },
   ],
   series: [
      {
         name: "降雨量",
         type: "bar",
         barWidth: 15,
         itemStyle: {
            color: function (params: { value: number; }) {
               if (params.value < 100) {
                  return {
                     type: 'linear',
                     x: 0, //右
                     y: 0, //下
                     x2: 0, //左
                     y2: 1, //上
                     colorStops: [
                        {
                           offset: 0.05,
                           color: '#ffffff' // 0% 处的颜色
                        },
                        {
                           offset: 0.1,
                           color: '#ff0000'
                        },
                        {
                           offset: 1,
                           color: 'transparent' // 100% 处的颜色
                        }
                     ]
                  };
               } else {
                  return {
                     type: 'linear',
                     x: 0, //右
                     y: 0, //下
                     x2: 0, //左
                     y2: 1, //上
                     colorStops: [
                        {
                           offset: 0.01,
                           color: '#ffffff' // 0% 处的颜色
                        },
                        {
                           offset: 0.1,
                           color: '#13D5FC'
                        },
                        {
                           offset: 1,
                           color: 'transparent' // 100% 处的颜色
                        }
                     ]
                  };
               }
            },
            barBorderRadius: [20, 20, 0, 0],
         },
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#1ACDDC",
            formatter: "{c}",
         },
         data: [200, 85, 112, 275, 305, 415],
      },
      {
         // name: '背景',
         type: "bar",
         barWidth: "15px",
         xAxisIndex: 0,
         yAxisIndex: 1,
         barGap: "-100%",
         data: [100, 100, 100, 100, 100, 100], //背景阴影长度
         itemStyle: {
            normal: {
               color: "rgba(255,255,255,0.01)",
               barBorderRadius: [0, 0, 0, 0],
               borderColor: "rgb(33,156,251)"
            },
         },
         tooltip: {
            show: false,
         },
         zlevel: 9,
      },
   ],
};

onMounted(() => {
    let botsEcar = echarts.init(bots.value)
    botsEcar.setOption(option)
})

</script>

<style scoped lang="scss">
.btg {
    height: 38%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: cover;
    margin-top: 20px;
    
    .tops {
        // margin-top: 0;
        height: 50px;
        width: 100%;
        height: 32%;

        div {
            font-size: 20px;
            width: 60%;
            margin-left: 10px;
            margin-top: -10px;

            .bot {
                margin-top: 10px;
                height: 5px;
                background: url(../../images/dataScreen-title.png) no-repeat;

            }
        }

    }

    .bots {
        width: 100%;
        height: 200px;
    }
}</style>